<!--
 * @Author: your name
 * @Date: 2021-03-17 00:29:06
 * @LastEditTime: 2021-03-17 00:55:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xu\shop_manager\shop_vue\src\components\report\Report.vue
-->
<template>
   <div>
     <!-- 面包屑导航 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item :to="{path: '/home'}">首页</el-breadcrumb-item>
       <el-breadcrumb-item>数据统计</el-breadcrumb-item>
       <el-breadcrumb-item>数据报表</el-breadcrumb-item>
     </el-breadcrumb>
     <!-- 卡片视图 -->
     <el-cart>
       <!-- 为Echarts准备一个具备大小（宽高）的dom -->
       <div id="main" style="width:600px;height:400px"></div>
     </el-cart>
   </div>
</template>

<script>
import echarts from 'echarts'
export default {
   data () {
      return {
        // options是需要合并的数据
        options: {
          title: {
            text: '用户来源'
          },
          tooltip: {
            trigger: 'axios',
            label: {
              backgroundColor: '#E9EEF3'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {boundaryGap: false}
          ],
          yAxis: [
            {type: 'value'}
          ]
        }
      };
   },
  //  此时，页面上的元素，已经被渲染完毕
   async mounted(){
    //  基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(documentById('main'))
    const {data: res } = this.$http.get('reports/type/1')
    if(res.meta.status !== 200) {
      return this.$message.error('获取折线图失败')
    }
    // 准备数据和配置项
    //合并两个对象
    const result = Object.assign(res.data, this.options)
    // 展示数据
    myChart.setOption(result)
   },
   components: {},

   methods: {}
}
</script>
<style lang='less' scoped>

</style>